<template>
  <div>
    <H2>V-IF</H2>
    <p v-if="showMessage">这是一段只有在条件满足时才会显示的消息。</p>
    <p :style="{color:'red'}" v-if="showButton">（只有在条件满足时才会显示）</p>
    <button @click="toggleButton">切换按钮显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //显示提示信息
      showMessage: true,
      //条件信息隐藏
      showButton: false
    };
  },
  methods: {
    toggleButton() {
      //更改条件信息显示状态
      this.showButton =!this.showButton;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
